<template>
    <div class="header-wrap">
        <div class="header">
            <i @click="showNavList" class="iconfont">&#xe62b;</i>
            <span>ZTTZ</span>
            <i @click="userInfoJump" class="iconfont user">&#xe69e;</i>
        </div>
        <div class="navList" v-if="isShowNavList">
            <div @click="navJump(item.path)" class="list-item" :key="index" v-for="(item, index) in navList">
                <span>{{item.name}}</span>
                <i class="iconfont">&#xe681;</i>
            </div>
            <div class="list-bottom"><span>ZTTZ</span></div>
        </div> 

        <router-view v-else />
    </div>
</template>

<script>
import { ref, computed } from '@vue/composition-api';
export default {
    setup(props, context) {
        // 显示跟隐藏导航
        const isShowNavList = ref(false);
        // 显示跟隐藏导航
        const showNavList = function () {
            isShowNavList.value = !isShowNavList.value;
        }


        // 导航
        const navList = ref([
            { name: '首页', path: '/home' },
            { name: '探索', path: '/explore' },
            { name: '我的', path: '/users' },
            { name: '消息', path: '/message' },
            { name: '桌面端', path: '/pcweb' },
        ]);

        // 导航跳转
        const navJump = function (path) {
            isShowNavList.value = false;
            if (path === '/users') {
                if (window.localStorage.getItem('token')) {
                    context.parent.$router.push('/users');
                } else {
                    context.parent.$router.push('/login');
                }
            } else if (path === '/message') {
                if (window.localStorage.getItem('token')) {
                    isShowNavList.value = false;
                    context.parent.$router.push('/message');
                } else {
                    context.parent.$router.push('/login');
                }
            } else if (path === '/pcweb') {
                location.replace('http://www.tianzhen47.cn');
            } else {
                context.parent.$router.push(path);
            }
            
            
        }

        // 跳转到用户详情
        const userInfoJump = function () {
            isShowNavList.value = false;
            // 判断有没有登录
            if (window.localStorage.getItem('token')) {
                context.parent.$router.push('/users');
            } else {
                // 跳转到登陆页面
                context.parent.$router.push('/login');
            }
        }

        const methods = {
            showNavList,
            navJump,
            userInfoJump
        }

        return {
            ...methods,
            isShowNavList,
            navList
        }
    }    
}
</script>

<style lang="less" scoped>

.header-wrap {
    display: flex;
    height: 100%;
    flex-direction: column;
}
.header { 
    display: flex;
    padding: 0 .4rem;
    width: 100%;
    justify-content: space-between;
    height: 1.866667rem;
    line-height: 1.866667rem;
    background-color: #000;
    color: #fff;
    i {
        font-size: 1.333333rem;
        cursor: pointer;
    }
    span {
        letter-spacing: .053333rem;
    }
}
.navList {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 .266667rem;
    background-color: #121212;
    .list-item {
        position: relative;
        flex: 1;
        border-bottom: .013333rem solid #333;
        span {
            position: absolute;
            left: .266667rem;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: .88rem;
            font-weight: 700;
        }
        i {
            position: absolute;
            top: 50%;
            right: .266667rem;
            transform: translateY(-50%);
            color: #2d2d2d;
            font-size: .88rem;
        }
    }
    .list-bottom {
        position: relative;
        height: 2.666667rem;
        span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: 700;
            color: #fff;
            letter-spacing: .08rem;
        }
    }
}
</style>